<template>
  <div>
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <h2>薪资:{{ job.a.salary }}</h2>
    <button @click="name += '~'">修改姓名</button>
    <button @click="changeAge">增长年龄</button>
    <button @click="job.a.salary++">增薪</button>
    <button @click="showRawAge">输出最原始的person</button>
    <hr />
  </div>
</template>

<script>
import { toRefs,toRaw, reactive} from "vue";

export default {
  name: "App",
  
  setup() {
     // markRaw用于标记proxy对象,使其返回原始的对象（不再作响应式）
    let person = reactive({
      name: "小凡",
      age: 28,
      job:{
          a:{
              salary:10
          }
      }
    });

    
    
    function changeAge(){
        person.age++
        console.log('person.age', person.age)
    }

    function showRawAge(){
        // toRaw返回最原始的对象,不再具有响应式
        const p = toRaw(person)
        p.age++
        console.log('p', p)
    }

    
    

    
    return {
        person,
       changeAge,
       showRawAge,
        ...toRefs(person),
        


     
    };
  },
};
</script>

<style>
</style>
